Ext.onReady(function() {

   toolbar = Ext.widget({
       xtype: 'toolbar',
       border: true,
       rtl: false,
       id: 'options-toolbar',
       floating: true,
       fixed: true,
       preventFocusOnActivate: true,
       draggable: {
           constrain: true
       },
       items: [{
           xtype: 'combo',
           rtl: false,
           width: 170,
           labelWidth: 45,
           fieldLabel: 'Theme',
           displayField: 'name',
           valueField: 'value',
           labelStyle: 'cursor:move;',
           margin: '0 5 0 0',
           store: Ext.create('Ext.data.Store', {
               fields: ['value', 'name'],
               data : [
                   { value: 'access', name: 'Accessibility' },
                   { value: 'classic', name: 'Classic' },
                   { value: 'gray', name: 'Gray' },
                   { value: 'neptune', name: 'Neptune' }
               ]
           }),
           value: 'neptune',
           listeners: {
               select: function(combo) {
                   var theme = combo.getValue();
                   if (theme !== defaultTheme) {
                       setParam({ theme: theme });
                   } else {
                       removeParam('theme');
                   }
               }
           }
       }, {
           xtype: 'button',
           rtl: false,
           hidden: !(Ext.repoDevMode || location.href.indexOf('qa.sencha.com') !== -1),
           enableToggle: true,
           pressed: rtl,
           text: 'RTL',
           margin: '0 5 0 0',
           listeners: {
               toggle: function(btn, pressed) {
                   if (pressed) {
                       setParam({ rtl: true });
                   } else {
                       removeParam('rtl');
                   }
               }
           }
       }, {
           xtype: 'tool',
           type: 'close',
           rtl: false,
           handler: function() {
               toolbar.destroy();
           }
       }],

       // Extra constraint margins within default constrain region of parentNode
       constraintInsets: '0 -' + (Ext.getScrollbarSize().width + 4) + ' 0 0'
   });
   toolbar.show();
   toolbar.alignTo(
       document.body,
       Ext.optionsToolbarAlign || 'tr-tr',
       [
           (Ext.getScrollbarSize().width + 4) * (Ext.rootHierarchyState.rtl ? 1 : -1),
           -(document.body.scrollTop || document.documentElement.scrollTop)
       ]
   );
   
   var constrainer = function() {
       toolbar.doConstrain();
   };
           
});//end of Ext.onReady